<template>
  <a-modal class="invoiceApply_modal" v-model="visible" :title="title" :confirmLoading="submitLoading" width="1200px"
    ok-text="提交" cancel-text="取消" :footer="tab == '0' ? undefined : null" @ok="addFormSubmit">
    <a-form :form="events_form">
      <div v-if="tab == '0'">
        <a-form-item label="已选择">
          <a-statistic :value="addInfo.selectOrderCount" suffix="项" :value-style="{ color: '#3f8600' }">
          </a-statistic>
        </a-form-item>
        <a-form-item label="合计开票金额">
          <a-statistic :value="addInfo.invoiceAmountSum" suffix="元" :value-style="{ color: '#D9001B' }">
          </a-statistic>
        </a-form-item>
        <a-table :columns="orderInfoColumns" :data-source="orderInfoList" :pagination="false" rowKey="orderId">
        </a-table>
        <a-card title="开票信息" style="margin-top: 10px;">
          <div v-for="item, index in addInfo.invoiceDetailList" :key="index">
            <a-form-item :label="item.invoiceFeeType == 1 ? '结算开票合计' : '服务费开票合计'">
              <a-statistic :value="item.invoiceAmount" suffix="元" :value-style="{ color: '#D9001B' }">
              </a-statistic>
            </a-form-item>
            <br />
            <a-form-item label="服务商名称">
              <a-input v-model="addInfo.parkName" :disabled="true" />
            </a-form-item>
            <a-form-item label="发票类型" class="formRequired">
              <a-select placeholder="请选择" v-model="item.invoiceType" :disabled="isDisabled">
                <a-select-option v-for="itemA in addInfo.invoiceTypeDict" :key="itemA.typeId">{{ itemA.typeName
                }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="发票类目" class="formRequired">
              <a-select placeholder="请选择" v-model="item.invoiceCategory" :disabled="isDisabled">
                <a-select-option v-for="itemB in addInfo.invoiceCategoryDict" :key="itemB.categoryId">{{
                  itemB.categoryName
                }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="备注">
              <a-input v-model="item.remark" :disabled="isDisabled" />
            </a-form-item>
						<a-form-item label="税率">
						  <a-select placeholder="请选择" v-model="item.taxRate" :disabled="isDisabled" @change="(e)=>taxChange(e,index)">
						    <a-select-option key="0.05">0.05</a-select-option>
								<a-select-option key="0.06">0.06</a-select-option>
						  </a-select>
						</a-form-item>
            <a-form-item label="不含税价(元)">
              <a-input v-model="item.noTaxPrice" :disabled="true" />
            </a-form-item>
            <a-form-item label="税额">
              <a-input v-model="item.taxAmount" :disabled="true" />
            </a-form-item>
          </div>
        </a-card>
        <a-card title="抬头信息" style="margin-top: 10px;">
          <a-form-item label="编号" class="formRequired">
            <a-select placeholder="请选择" v-model="params.invoiceTitleId" @change="invoiceTitleChange"
              :disabled="isDisabled">
              <a-select-option v-for="item in addInfo.invoiceTitleDict" :key="item.invoiceTitleId">
                {{ item.isDefault ? item.invoiceTitleId + ' - 默认' : item.invoiceTitleId }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="公司名称">
            <a-input v-model="titleInfo.enterpriseName" :disabled="true" />
          </a-form-item>
          <a-form-item label="纳税人识别号">
            <a-input v-model="titleInfo.taxpayerNumber" :disabled="true" />
          </a-form-item>
          <a-form-item label="电话">
            <a-input v-model="titleInfo.phone" :disabled="true" />
          </a-form-item>
          <a-form-item label="地址">
            <a-input v-model="titleInfo.address" :disabled="true" />
          </a-form-item>
          <a-form-item label="开户行">
            <a-input v-model="titleInfo.bank" :disabled="true" />
          </a-form-item>
          <a-form-item label="银行账号">
            <a-input v-model="titleInfo.bankAccount" :disabled="true" />
          </a-form-item>
        </a-card>
        <a-card title="邮寄地址" style="margin-top: 10px;">
          <a-form-item label="收件人姓名">
            <a-select placeholder="请选择" v-model="params.invoiceMailId" @change="invoiceMailChange" :disabled="isDisabled">
              <a-select-option v-for="item in addInfo.invoiceMailDict" :key="item.invoiceMailId">
                {{ item.isDefault ? item.mailName + ' - 默认' : item.mailName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="收件人电话">
            <a-input v-model="mailInfo.phone" :disabled="true" />
          </a-form-item>
          <a-form-item label="省份">
            <a-input v-model="mailInfo.province" :disabled="true" />
          </a-form-item>
          <a-form-item label="城市">
            <a-input v-model="mailInfo.city" :disabled="true" />
          </a-form-item>
          <a-form-item label="县(区)">
            <a-input v-model="mailInfo.area" :disabled="true" />
          </a-form-item>
          <a-form-item label="详细地址">
            <a-input v-model="mailInfo.address" :disabled="true" />
          </a-form-item>
        </a-card>
      </div>
      <div v-else>
        <a-form-item label="已选择">
          <a-statistic :value="orderInfoList.length" suffix="项" :value-style="{ color: '#3f8600' }">
          </a-statistic>
        </a-form-item>
        <a-form-item label="合计开票金额">
          <a-statistic :value="invoiceInfo.invoiceAmount" suffix="元" :value-style="{ color: '#D9001B' }">
          </a-statistic>
        </a-form-item>
        <a-table :columns="orderInfoColumns" :data-source="orderInfoList" :pagination="false" rowKey="orderId">
        </a-table>
        <a-card title="开票信息" style="margin-top: 10px;">
          <div v-for="item, index in invoiceInfo.invoiceDetailList" :key="index">
            <a-form-item :label="item.invoiceFeeType == 1 ? '结算开票合计' : '服务费开票合计'">
              <a-statistic :value="item.invoiceAmount" suffix="元" :value-style="{ color: '#D9001B' }">
              </a-statistic>
            </a-form-item>
            <br />
            <a-form-item label="发票类型">
              <div class="info">{{ item.invoiceTypeDesc }}</div>
            </a-form-item>
            <a-form-item label="发票类目">
              <div class="info">{{ item.invoiceCategoryDesc }}</div>
            </a-form-item>
            <a-form-item label="备注">
              <div class="info">{{ item.remark }}</div>
            </a-form-item>
						<a-form-item label="税率">
						  <div class="info">{{ item.invoiceTaxRate }}</div>
						</a-form-item>
            <a-form-item label="不含税价(元)">
              <div class="info">{{ item.invoiceNoTaxPrice }}</div>
            </a-form-item>
            <a-form-item label="税额">
              <div class="info">{{ item.invoiceTaxAmount }}</div>
            </a-form-item>
          </div>
        </a-card>
        <a-card title="抬头信息" style="margin-top: 10px;">
          <a-form-item label="公司名称">
            <div class="info">{{ invoiceInfo.enterpriseName }}</div>
          </a-form-item>
          <a-form-item label="纳税人识别号">
            <div class="info">{{ invoiceInfo.titleTaxpayerNumber }}</div>
          </a-form-item>
          <a-form-item label="电话">
            <div class="info">{{ invoiceInfo.titlePhone }}</div>
          </a-form-item>
          <a-form-item label="地址">
            <div class="info">{{ invoiceInfo.titleAddress }}</div>
          </a-form-item>
          <a-form-item label="开户行">
            <div class="info">{{ invoiceInfo.titleBank }}</div>
          </a-form-item>
          <a-form-item label="银行账号">
            <div class="info">{{ invoiceInfo.titleBankAccount }}</div>
          </a-form-item>
        </a-card>
        <a-card title="邮寄地址" style="margin-top: 10px;">
          <a-form-item label="收件人姓名">
            <div class="info">{{ invoiceInfo.mailName }}</div>
          </a-form-item>
          <a-form-item label="收件人电话">
            <div class="info">{{ invoiceInfo.mailPhone }}</div>
          </a-form-item>
          <a-form-item label="省份">
            <div class="info">{{ invoiceInfo.mailProvince }}</div>
          </a-form-item>
          <a-form-item label="城市">
            <div class="info">{{ invoiceInfo.mailCity }}</div>
          </a-form-item>
          <a-form-item label="县(区)">
            <div class="info">{{ invoiceInfo.mailArea }}</div>
          </a-form-item>
          <a-form-item label="详细地址">
            <div class="info">{{ invoiceInfo.mailAddress }}</div>
          </a-form-item>
        </a-card>
      </div>
    </a-form>
  </a-modal>
</template>

<script>
import {
  invoiceApplyInfoLoad,
  invoiceTitleQuery,
  invoiceMailQuery,
  submitInvoiceApply,
  invoiceApplyQuery,
	invoiceCalcTax
} from "@/api/human/finance"
import {
  getEnterpriseInfo,
} from "@/api/human/enterprise"
import store from '@/store'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'AddInfo',
  data() {
    return {
      title: "",
      visible: false,
      submitLoading: false,

      ids: "",
      tab: "",
      orderIdList: [], // 选择的订单编号
      enterpriseId: "", // 企业id
      isDisabled: false, // 是否禁用状态
      params: {
        "enterpriseId": "",
        "chooseOrderIds": [],
        "invoiceType": undefined,
        "invoiceCategory": undefined,
        "remark": "",
        "titleTaxpayerNumber": "",
        "titleAddress": "",
        "titlePhone": "",
        "titleBank": "",
        "titleBankAccount": "",
        "mailName": "",
        "mailPhone": "",
        "mailProvince": "",
        "mailCity": "",
        "mailArea": "",
        "mailAddress": "",
        "invoiceTitleId": undefined,
        "invoiceMailId": undefined,
      },

      addInfo: {}, // 开票申请详情
      titleInfo: {}, // 抬头信息详情
      mailInfo: {}, // 邮递信息详情
      invoiceInfo: {}, // 查看详情信息
      orderInfoColumns: [{
        title: '订单编号',
        dataIndex: 'orderId'
      }, {
        title: '订单名称',
        dataIndex: 'orderName'
      }, {
        title: '结算成功金额',
        dataIndex: 'orderAmount',
      }, {
        title: '服务费金额',
        dataIndex: 'serviceFee',
      }, {
        title: '开票金额',
        dataIndex: 'invoiceAmount',
      }], // 订单配置项
      orderInfoList: [], // 选择的订单详情

    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    });
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    // 打开编辑弹窗 
    async add(row, enterpriseId, tab) {
      this.title = tab == '0' ? '开票申请' : "开票申请详情";
      this.visible = true;
      this.tab = tab;
      this.enterpriseId = enterpriseId;
      if (tab == '0') {
        // 合并开票
        this.isDisabled = false;
        this.orderIdList = row;
        let { code, data } = await invoiceApplyInfoLoad({ enterpriseId: enterpriseId, orderIdList: row })
        if (code == '1') {
          this.addInfo = data;
          this.orderInfoList = data.orderInfoList;
          data.invoiceTitleDict.forEach(item => {
            if (item.isDefault == 1) {
              this.params.invoiceTitleId = item.invoiceTitleId
              this.invoiceTitleChange(item.invoiceTitleId)
            }
          })
          data.invoiceMailDict.forEach(item => {
            if (item.isDefault == 1) {
              this.params.invoiceMailId = item.invoiceMailId
              this.invoiceMailChange(item.invoiceMailId)
            }
          })
        }
      } else {
        // 开票申请详情
        this.isDisabled = true;
        let { code, data } = await invoiceApplyQuery(row)
        if (code == '1') {
          this.invoiceInfo = data;
          this.orderInfoList = data.orderInfoList;
        }
      }
    },
		// 税率选择
		taxChange(e,index) {
			let amount = this.addInfo.invoiceDetailList[index].invoiceAmount;
			this.getInvoiceCalTax(amount,e).then(res=> {
				this.addInfo.invoiceDetailList[index].noTaxPrice = res.noTaxPrice;
				this.addInfo.invoiceDetailList[index].taxAmount = res.taxAmount;
			})
		},
		// 获取税率列表
		async getInvoiceCalTax(amount,tax) {
			let { code, data } = await invoiceCalcTax({
				invoiceAmount: amount,
				taxRate: tax
			});
			if (code == '1') {
				return data;
			}
		},
    // 选择抬头信息
    async invoiceTitleChange(value) {
      if (value) {
        let { code, data } = await invoiceTitleQuery(value);
        if (code == '1') {
          this.titleInfo = data;
        }
      }
    },
    // 选择邮寄地址
    async invoiceMailChange(value) {
      if (value) {
        this.params.mailName = this.addInfo.invoiceMailDict.find(item => item.invoiceMailId == value).mailName;
        let { code, data } = await invoiceMailQuery(value);
        if (code == '1') {
          this.mailInfo = data;
        }
      }
    },
    // 提交
    async addFormSubmit() {
      if (this.enterpriseId) {
        this.params.enterpriseId = this.enterpriseId;
      }
      if ((!this.addInfo.invoiceDetailList[0]?.invoiceType || !this.addInfo.invoiceDetailList[0]?.invoiceCategory)) {
        return this.$message.warning('请选择结算开票发票类型和发票类目')
      }
      if (this.addInfo.invoiceDetailList.length == 2 && (!this.addInfo.invoiceDetailList[1]?.invoiceType || !this.addInfo.invoiceDetailList[1]?.invoiceCategory)) {
        return this.$message.warning('请选择服务费开票发票类型和发票类目')
      }
      if (!this.params.invoiceTitleId) {
        return this.$message.warning('请选择抬头信息编号')
      }
      // if (!this.params.invoiceMailId) {
      //   return this.$message.warning('请选择邮寄地址收件人姓名')
      // }

      // 开票信息提交赋值
      this.params.chooseOrderIds = this.orderIdList;
      this.params.invoiceDetailList = this.addInfo.invoiceDetailList;
      // 抬头信息提交赋值
      this.params.titleTaxpayerNumber = this.titleInfo.taxpayerNumber;
      this.params.titleAddress = this.titleInfo.address;
      this.params.titlePhone = this.titleInfo.phone;
      this.params.titleBank = this.titleInfo.bank;
      this.params.titleBankAccount = this.titleInfo.bankAccount;
      // 邮寄地址提交赋值
      this.params.mailName = this.mailInfo.mailName;
      this.params.mailPhone = this.mailInfo.phone;
      this.params.mailProvince = this.mailInfo.province;
      this.params.mailCity = this.mailInfo.city;
      this.params.mailArea = this.mailInfo.area;
      this.params.mailAddress = this.mailInfo.address;
      
      this.submitLoading = true;
      const { code } = await submitInvoiceApply(this.params);
      this.submitLoading = false;
      if (code === '1') {
        this.visible = false;
        this.$message.success('操作成功');
        this.$emit('on-ok');
      }
    }
  }
}
</script>
<style lang="less">
.invoiceApply_modal {
  .formRequired {
    .ant-form-item-label::before {
      display: inline-block;
      margin-right: 4px;
      color: #f5222d;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: '*';
    }
  }

  .ant-form-item {
    width: 50%;
    margin-right: 0;
    margin-bottom: 10px;
    display: inline-block;

    .ant-form-item-label {
      width: 30%;
      text-align: left;
    }

    .ant-form-item-control-wrapper {
      width: 80%;
    }

    .info {
      width: 100%;
      height: 32px;
      padding: 4px 11px;
      border: 1px solid #d9d9d9;
      line-height: 1.5;
      border-radius: 4px;
    }
  }

}
</style>
